<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!--    justify-content 设置主轴上元素的排列方式-->
<!--    flex-start  默认值，从头部开始，如果主轴是x轴，则从左到右-->
<!--    flex-end    从尾部开始排列-->
<!--    content     在主轴上居中对其-->
<!--    space-around 平分剩余空间-->
<!--    space-between 先两边贴边，再平分剩余空间-->
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100%;
            height: 200px;
            background-color: bisque;

            display: flex;
            /* 设置横轴 */
            flex-direction: row;
            /* 从左到右排列 -- 默认 */
            /*justify-content: flex-start;*/

            /*让子元素居中*/
            /*justify-content: center;*/

            /*平分剩余空间*/
            /*justify-content: space-around;*/

            /*先两边贴边，再平分剩余空间*/
            justify-content: space-between;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 10px;
        }
    </style>
</head>
<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
</body>
</html>